<!--suppress ALL -->
<template>
<div class="page keyAlarmApply-page" data-page="keyAlarmApply" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link" @click="$root.backToTab()">
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="link-page-top" style="padding-bottom: 17px;">
        <div class="link-page-title">一键报警记录</div>
    </div>
    <div data-infinite-distance="50" class="page-content infinite-scroll-content ptr-content"  @ptr:refresh="refreshAlertList" id="alarm-content" style="padding-bottom: 100px;">
        <div class="ptr-preloader">
            <div class="preloader color-multi"></div>
            <div class="ptr-arrow"></div>
        </div>
        <div class="list media-list keyAlarmApply-page-list">
              <ul id="alarmListUl"></ul>
        </div>
        <div class="preloader infinite-scroll-preloader" style="display: none;" id="keyAlarm-preloader"></div>
    </div>
    <div class="add-keyAlarm">
        <a href="/keyAlarm/" class="link icon-only" data-view=".view-main">
            <i class="iconfont icon-weibiaoti--1"></i>
        </a>
    </div>
</div>
</template>

<script>
return {
    data: function () {
        return {
             organizationIds:userInfor.organizationIds,
             queryType:1,
             pageIndex:0,
             pageSize:25,
             isloadMore:true,
        }
    },
    methods: {
        loadMore:function(){
            var self = this;
            if (self.isloadMore){
               self.pageIndex++;
               self.getManualAlertList();
            }
        },
        getManualAlertList:function() {
           var self = this;
           Dao.getKeyAlarmList({          
               userName:userInfor.accountName,
               deviceId:appKeyObj.deviceId,
               organizationIds:self.organizationIds,
               queryType:self.queryType,
               pageSize:self.pageSize,
               pageIndex:self.pageIndex
           },function(data) {
               if (data&&data.length > 0) {
                    if (data.length > self.pageSize) { //有分页
                        self.isloadMore = true;
                        $("#keyAlarm-preloader").show();
                    } else {
                        self.isloadMore = false;
                        $("#keyAlarm-preloader").hide();
                    }
                    for (var i = 0; i < data.length; i++) {
                        var bean = data[i];
                        var picHtml = "";   
                        if (bean.pictureUrl&&bean.pictureUrl!="") {
                            var images = bean.pictureUrl.split(',');
                            for (var j=0; j < images.length; j++){                          
                                picHtml += "<img class='my_image_"+bean.id+"' src="+images[j]+" />";
                            }
                        }
                        $("#alarmListUl").append(`
                            <li>
                                <div class="keyAlarm-list" id="keyAlarmList-`+bean.id+`">
                                    <div class="keyAlarm-top">
                                        <div>`+bean.createTime+`</div>
                                        <div class="peo">
                                            <span>`+bean.createName+`</span>
                                            <span  class="phone">`+bean.phone+`</span>
                                        </div>
                                    </div> 
                                    <div class="keyAlarm-pic" id='my_image_`+bean.id+`'>
                                        <div>`+picHtml+`</div>
                                    </div> 
                                    <div class="keyAlarm-con">`+common.transNullundefinedToline(bean.description)+`</div> 
                                    <div class="keyAlarm-name">`+ common.transNullundefinedToline(bean.orgName)+`</div> 
                                </div>
                                <div class="keyAlarm-bottom" id="handResultCon-`+bean.id+`">
                                    <span class="left" id="keyStatus-`+bean.id+`"></span>
                                    <span class="right" id="keyStatus-btn-`+bean.id+`" id="lijihandle`+bean.id+`" data-id="`+bean.id+`" data-time="`+bean.createTime+`" data-status="`+bean.handlerStatus+`" data-organizationId="`+bean.organizationId+`"></span>
                                </div>
                                <div class="keyAlarm-result" id="keyAlarm_result_`+bean.id+`">
                                    <div class="title">处理结果</div> 
                                    <div  id="keyResult_`+bean.id+`"></div> 
                                </div> 
                        </li>`);
                        
                        if(bean.handlerStatus == -1 ){
                            $("#keyStatus-"+bean.id).html("当前无人处理");
                            $("#keyStatus-btn-"+bean.id).html("立即处理");
                        }else if(bean.handlerStatus == 2 ){
                            $("#keyStatus-"+bean.id).html("由"+"<span style='color:#397FCF'>"+common.transNullundefinedToline(bean.handlerAccountName)+"</span>在处理");
                            $("#keyStatus-btn-"+bean.id).html("继续处理");
                        }else{ 
                            $("#handResultCon-"+bean.id).hide(); 
                            // $("#keyStatus-"+bean.id).html("由"+"<span style='color:#397FCF'>"+common.transNullundefinedToline(bean.handlerAccountName)+"</span>处理完成");
                            // $("#keyStatus-btn-"+bean.id).html("");
                            $("#keyAlarm_result_"+bean.id).show();
                            $("#keyResult_"+bean.id).empty();
                            if(bean.handleList.length > 0){
                                for(var j=0;j<bean.handleList.length;j++){
                                    $("#keyResult_"+bean.id).append(`<div id="hand`+bean.handleList[j].id+`" class="key-result-list" >
                                        <div class="type">处理类型：`+common.transNullundefinedToline(bean.handleList[j].handleTypeName)+`</div> 
                                        <div class="type">`+common.transNullundefinedToline(bean.handleList[j].remark)+`</div> 
                                        <div class="content" id="handPic`+bean.handleList[j].id+`"></div>
                                    </div>`);
                                    $("#handPic"+bean.handleList[j].id).empty();
                                    if(bean.handleList[j].picUrl){
                                        var urlArr = bean.handleList[j].picUrl.split(",");
                                        for(var n=0;n<urlArr.length;n++){
                                            $("#handPic"+bean.handleList[j].id).append(`<img class='my_image' src=`+urlArr[n]+` />`);
                                        }
                                    }
                                }
                            }
                        }   
                        
                        jQuery("#keyStatus-btn-"+bean.id).off().on("click",function(event){
                            var self=this;                        
                            var infoId=jQuery(event.currentTarget).attr("data-id");
                            var infoCreateTime=jQuery(event.currentTarget).attr("data-time");
                            var infoHandlerStatus=jQuery(event.currentTarget).attr("data-status");
                            var infoOrganizationId=jQuery(event.currentTarget).attr("data-organizationId");
                        if(infoHandlerStatus=="undefined"){
                                infoHandlerStatus=0;
                            }
                            app.router.navigate("/immediateHandle/"+infoId+"/"+infoCreateTime+"/"+infoHandlerStatus+"/"+infoOrganizationId+"/");
                        });

                        jQuery(".my_image_"+bean.id).on("click",function(e) {
                            var pictureArr=[];
                            var imgUrlObj = $(this).parent().children();
                            var imgIndex = $(this).index();
                            jQuery.each(imgUrlObj,function(index, el) {
                                var url = $(el).attr("src");
                                pictureArr.push(url);
                            });
                            openAndShowBigImage(pictureArr,imgIndex)
                        });
                    }
               } else {
                   self.isloadMore = false;              
                   $("#keyAlarm-preloader").remove();                 
                   if (self.pageIndex == 0){ //暂无数据
                       $("#alarm-content").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                   }
               }
           });
        },
        refreshAlertList: function (e, done) {
            if (done && e) {
                var self = this;
                var $ = self.$$;
                setTimeout(function () {
                    self.reInit();
                    $('#keyAlarm-preloader').hide();
                        self.getManualAlertList();
                    done();
                }, 1000);
            }
        },
        reInit:function(){
            var self = this;
            self.pageIndex = 0;
            $(".page-content").scrollTop(0,300);
            $("#alarmListUl").empty();
            if(!self.allowInfinite){
                self.allowInfinite = true;
                $('#keyAlarm-preloader').show();
            }
        },
    },
    on: {
        pageBeforeIn:function(e, page){
           var self = this;
           self.pageIndex = 0;
            jQuery("#alarm-content").find(".no-data-img").remove()
            jQuery("#alarmListUl").empty();
           self.getManualAlertList();
        },
    }
}
</script>
